<!doctype html>
<html lang="zh-CN" th:replace="admin-layout :: layout(~{::title}, ~{::style}, ~{::script}, ~{::body}, 'exam-list')"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>考试试卷</title>
    <style>
        .affix {
            top: 50px;
            left: 220px;
            right: 20px;
            background-color: white;
        }
        .tab-pane>.well:last-child{
            margin-bottom: 0;
        }
    </style>
    <script>
        var $table = $("#table");
        var $remove = $("#removeBtn");
        var $update = $("#updateBtn");
        var $search = $("#searchBtn");
        var selections = []

        //$(this).serialize()
        $(function () {
            tableList(columns)
        })

        var columns = [{
            checkbox: true
        }, {
            field: 'name',
            title: '试卷名称',
        }, {
            field: 'markingNum',
            title: '阅卷数量',
            formatter: markingNumFormatter
        }]

        function markingNumFormatter(value, row, index) {
            return value+"/"+$("#userNum").val()
        }

        $update.click(function () {
            var examId = $(this).data("exam-id");
            location.href = "/admin/exam/marking/paper/info/" + examId + "/" + selections[0]
        })

        function getIdSelections() {
            return $.map($table.bootstrapTable('getSelections'), function (row) {
                return row.id
            })
        }

        $table.on('check.bs.table uncheck.bs.table ' +
            'check-all.bs.table uncheck-all.bs.table',
            function () {
                $remove.prop('disabled', !$table.bootstrapTable('getSelections').length);
                $update.prop('disabled', !$table.bootstrapTable('getSelections').length);

                // save your data, here just save the current page
                selections = getIdSelections()
                // push or splice the selections if you want to save all data selections
            })

        $search.click(function () {
            $table.bootstrapTable('refresh')
        })

        $("#scoreBtn").click(function(){
            var scoreContent = "";
            $(".scoreInput").each(function(index,element){
                var score = $(this).val();
                var userQstId = $(this).data("id");
                if (index>0){
                    scoreContent=scoreContent+","+score+"|"+userQstId;
                }else{
                    scoreContent=scoreContent+score+"|"+userQstId;
                }
            })
            ajaxJson("/admin/exam/ajax/updateQstScore2",{"userPaperId":$("#userPaperId").val(),"scoreContent":scoreContent,"examId":$("#examId").val(),"paperId":$("#paperId").val()},function(res){
                if (res.status){
                    msgTips("操作成功");
                }else{
                    msgTips(res.message);
                }
            })
        })
    </script>
</head>
<body>
<!--<ol class="breadcrumb">
    <li><a th:href="@{/admin/exam/list}">考试列表</a></li>
    <li><a th:href="@{/admin/exam/marking/{examId}(examId=${exam.id})}">考试试卷</a></li>
    <li><a th:href="@{/admin/exam/marking/paper/{examId}/{paperId}(examId=${exam.id},paperId=${paperId})}">用户试卷</a></li>
    <li class="active">试卷详情</li>
</ol>-->
<input type="hidden" id="userPaperId" th:value="${userPaperId}">
<input type="hidden" id="examId" th:value="${examId}">
<input type="hidden" id="paperId" th:value="${paperId}">
<div>

    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist" data-spy="affix" data-offset-top="178" data-offset-bottom="0">
        <li role="presentation" class="active"><a href="#radio" aria-controls="radio" data-type="A" role="tab"
                                                  data-toggle="tab">单选题</a></li>
        <li role="presentation"><a href="#checkbox" aria-controls="checkbox" data-type="B" role="tab"
                                   data-toggle="tab">多选题</a></li>
        <li role="presentation"><a href="#judge" aria-controls="judge" data-type="C" role="tab"
                                   data-toggle="tab">判断题</a></li>
        <li role="presentation"><a href="#subjective" aria-controls="subjective" data-type="D" role="tab"
                                   data-toggle="tab">主观题</a>
        </li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="radio">
            <div class="well" th:each="item:${qstType.A}" th:object="${item}">
                <p>[[${itemStat.count}]].[(*{content})]</p>
                <p th:each="option:*{optionDtoList}">[[${option.option}]].[(${option.content})]</p>
                <p>正确答案：[(*{answer})]</p>
                <p>用户答案：[[*{userAnswer}]]</p>
                <p>试题解析：[(*{analysis})]</p>
                <div>分数：[(*{userScore})]</div>
            </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="checkbox">
            <div class="well" th:each="item:${qstType.B}" th:object="${item}">
                <p>[[${itemStat.count}]].[(*{content})]</p>
                <p th:each="option:*{optionDtoList}">[[${option.option}]].[(${option.content})]</p>
                <p>正确答案：[(*{answer})]</p>
                <p>用户答案：[[*{userAnswer}]]</p>
                <p>试题解析：[(*{analysis})]</p>
                <div>分数：[(*{userScore})]</div>
            </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="judge">
            <div class="well" th:each="item:${qstType.C}" th:object="${item}">
                <p>[[${itemStat.count}]].[(*{content})]</p>
                <p th:each="option:*{optionDtoList}">[(${option.content})]</p>
                <p>正确答案：[(*{answer})]</p>
                <p>用户答案：[[*{userAnswer}]]</p>
                <p>试题解析：[(*{analysis})]</p>
                <div>分数：[(*{userScore})]</div>
            </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="subjective">
            <div class="well" th:each="item:${qstType.D}" th:object="${item}">
                <p>[[${itemStat.count}]].[(*{content})]</p>
                <p>用户答案：[[*{userAnswer}]]</p>
                <p>试题解析：[(*{analysis})]</p>
                <form class="form-inline">
                    <div class="form-group">
                        <label class="sr-only">Amount (in dollars)</label>
                        <div class="input-group">
                            <div class="input-group-addon">分数</div>
                            <input type="number" class="form-control scoreInput" th:value="*{userScore}" min="0" th:data-id="*{userQstId}">
                        </div>
                    </div>
                    <!--<button type="button" class="btn btn-primary scoreBtn" th:data-id="*{userQstId}">提交</button>
                    <button type="reset" class="btn btn-warning">重置</button>-->
                </form>
            </div>
            <button type="button" class="btn btn-primary" id="scoreBtn">提交</button>
        </div>
    </div>

</div>
</body>
</html>